<template>
	<el-dialog :showAdd width="40%" :close-on-click-modal="false" @close="closeDialog(ruleFormRef)">
		<TitleBox :title="title"></TitleBox>
		<el-form class="layout-form" :rules="rules" :model="addData" ref="ruleFormRef">
			<el-form-item label="医院名称" label-width="100px" prop="hospitalName">
				<el-input placeholder="请输入医院名称" v-model="addData.hospitalName"></el-input>
			</el-form-item>
			<el-form-item label="联系人" label-width="100px" prop="contact">
				<el-input placeholder="请输入联系人姓名" v-model="addData.contact"></el-input>
			</el-form-item>
			<el-form-item label="联系电话" label-width="100px" prop="phone">
				<el-input placeholder="请输入联系电话" v-model="addData.phone"></el-input>
			</el-form-item>
			<el-form-item label="医院地址" label-width="100px" prop="address">
				<el-input placeholder="请输入详细地址" v-model="addData.address"></el-input>
			</el-form-item>
			<el-form-item class="el-form-footer">
				<el-button style="background-color: #ccc; color: white" @click="handleCancle">取消</el-button>
				<el-button type="primary" @click="handleConfirm(ruleFormRef)">确定</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script setup lang='ts'>
import { reqAddHospitial } from "@/api/hospital/index";
import { reactive, ref } from "vue";
import TitleBox from "@/components/titleBox/index.vue";
import { ElMessage } from "element-plus";
const title = ref("新增医院");
defineProps(["showAdd"]);

const emit = defineEmits(["cancle", "confirm"]);
// 新增医院传递数据
const addData = reactive<any>({
	hospitalId: "",
	hospitalName: "",
	contact: "",
	phone: "",
	address: "",
});

// 表单校验
const ruleFormRef = ref();
const rules = reactive<any>({
	hospitalName: [{ required: true, message: "请输入医院名称", trigger: "blur" }],
	contact: [{ required: true, message: "请输入联系人", trigger: "blur" }],
	phone: [
		{ required: true, message: "请输入联系电话", trigger: "blur" },
		{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
	],
	address: [{ required: true, message: "请输入医院地址", trigger: "blur" }],
});
// 点击确定
const handleConfirm = async (formEl: any) => {
	if (!formEl) return;
	await formEl.validate(async (isOK: any) => {
		if (isOK) {
			const result = await reqAddHospitial(addData);
			// console.log("添加医院result", result);
			if (result.data.code === 0) {
				emit("confirm");
				ElMessage({
					type: "success",
					message: "添加成功",
				});
			}
		} else {
			console.log("输入框不能为空！");
		}
	});
};
// 点击取消
const handleCancle = () => {
	emit("cancle");
};

// 关闭对话框，清空数据
const closeDialog = (formEl: any) => {
	if (!formEl) return;
	formEl.resetFields();
};
</script>

<style scoped lang='scss'>
.layout-form {
	margin-top: 30px;

	// 密码报错提示
	:deep(.el-form-item__error) {
		left: 10px;
	}

	.el-input {
		width: 90%;
		margin-left: 10px;
	}

	.el-form-footer {
		margin-top: 30px;
		margin-left: 70%;
	}
}
</style>